import React,{Component} from 'react';
import {connect} from 'dva';
import BtnGroup from '../../components/BtnGroup';
import {Table,Modal} from 'antd';
import DropDown from '../../components/Dropdown'
import MenuForm from './MenuForm'
import menuTree from '../../utils/common'
import SearchType from "../../components/Filter/SearchBox";
import searchData from './../../assets/file/searchColumn';

const confirm = Modal.confirm;
const MenuList =({menu,dispatch})=>{
    const btnList = [{
        label:'新增一级菜单',
        icon:'plus',
        fun:()=>{
            dispatch({
                type:'menu/showModal',
                payload:{
                    currentItem:{
                        parent_id:0
                    },
                    modalType: 'add',
                }
            })
        }
    }]
    const columns = [{
        title: '名称',
        dataIndex: 'title',
        key: 'title',
    }, {
        title: '图标',
        dataIndex: 'icon',
        key: 'icon',
        width: '12%',
    }, {
        title: '路由',
        dataIndex: 'route',
        width: '30%',
        key: 'route',
    },{
        title: '操作',
        render: (text,record) => {
            let menuList = []
            if(text.parent_id === '0'){
                menuList = [
                    { key: '1', name: '编辑' ,icon:'edit'},
                    { key: '2', name: '删除' ,icon:'delete'},
                    { key: '3', name: '新增' ,icon:'plus'}]

            }else{
                menuList = [
                    { key: '1', name: '编辑' ,icon:'edit'},
                    { key: '2', name: '删除' ,icon:'delete'}]
            }
            return (
                <DropDown onMenuClick={(e)=>handleMenu(record,e)} menuList={menuList} />
            )
        }
    }];
    const handleMenu =　(record,e) =>{
        switch (e.key){
            case "2":
                dispatch({
                    type:'menu/showModal',
                    payload:{
                        currentItem:{
                            parent_id:record.id
                        },
                        modalType: 'add',
                    }
                })
                break;
            case "0":
                dispatch({
                    type:'menu/showModal',
                    payload:{
                        currentItem:record,
                        modalType: 'update',
                    }
                })
                break;
            case "1":
                confirm({
                    title: '是否删除该菜单？',
                    okText: '是',
                    okType: 'danger',
                    cancelText: '否',
                    onOk() {
                        dispatch({
                            type:'menu/remove',
                            payload:{
                                id:record.key
                            }
                        })
                    },
                });
        }
    }
    const {list,visible,modalType,currentItem} = menu;
    const listData = menuTree(list);
    const modalProps = {
        item: currentItem,
        maskVisible:visible,
        onSubmit(data){
            dispatch({
                type:`menu/${modalType}`,
                payload:data
            })
        },
        onCancel () {
            dispatch({
                type: 'menu/hideModal',
            })
        },
    }
    const searchProps = {
        showType:'list',
        searchColumn:{
            min:3,
            max:searchData.length,
            column:searchData,
        }
    }
    return(
        <div style={styles.listBox}>
            <SearchType {...searchProps} />
            <BtnGroup btnGroup={btnList}/>
            <div>
                <Table columns={columns} dataSource={listData} />
            </div>
            <MenuForm {...modalProps}/>
        </div>
    )
}
const styles ={
    listBox:{
        margin:10,
    }
}
export default connect(({menu})=>({menu}))(MenuList);